<template>
  <div class="app-container">

    <h2 style="text-align: center;">发布新比赛</h2>

    <el-steps :active="2" process-status="wait" align-center style="margin-bottom: 40px;">
      <el-step title="填写比赛基本信息"/>
      <el-step title="选择比赛开设项目"/>
      <el-step title="最终发布"/>
    </el-steps>

     <el-button type="text" @click="dialogFormVisible = true">添加项目（请勿重复添加同一项目）</el-button>

      <el-dialog title="添加项目" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="项目" :label-width="formLabelWidth">
            <el-select v-model="form.eid" placeholder="请选择项目">
              <el-option 
                v-for="item in eventList"
                :key="item.id"
                :label="item.name"
                :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="赛制" :label-width="formLabelWidth">
            <el-select v-model="form.sid" placeholder="请选择赛制">
              <el-option 
                v-for="item in styleList"
                :key="item.id"
                :label="item.name"
                :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="轮次" :label-width="formLabelWidth">
            <el-select v-model="form.round" placeholder="请选择轮次">
              <el-option label="1" value="1"></el-option>
              <el-option label="2" value="2"></el-option>
              <el-option label="3" value="3"></el-option>
              <el-option label="4" value="4"></el-option>
              <el-option label="5" value="5"></el-option>
              <el-option label="6" value="6"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addOpen">确 定</el-button>
        </div>
      </el-dialog>
      
            <el-table
                :data="tableData"
                stripe
                style="width: 100%">
                <el-table-column
                prop="eid"
                label="项目"
                width="180">
                </el-table-column>
                <el-table-column
                prop="sid"
                label="赛制"
                width="180">
                </el-table-column>
                <el-table-column
                prop="round"
                label="轮次">
                </el-table-column>
                <el-table-column label="操作">
                <template slot-scope="scope">
                <el-button
                    type="danger"
                    size="mini"
                    icon="el-icon-delete"
                    @click="deleteOpen(scope.row.id)"
                    >删除</el-button
                >
                </template>
                </el-table-column>
            </el-table>

    <div class="qwer">
      <el-button @click="previous">上一步</el-button>
      <el-button :disabled="saveBtnDisabled" type="primary" @click="next"
        >下一步</el-button
      >
    </div>
  </div>
  
</template>
<script>
import event from '@/api/comp/event'
import style from '@/api/comp/style'
import open from '@/api/comp/open'


export default {
  components: {},
  inject:['reload'],
  props: [],
  data() {
    return {
      tableData: [],
      compId:undefined,
      scheduleAction: 'https://jsonplaceholder.typicode.com/posts/',
      schedulefileList: [],
      dialogFormVisible:false,
      form: {
        cid:'',
        sid:'',
        eid:'',
        round:undefined,
      },
      formLabelWidth: '120px',
      eventList:[],
      styleList:[],
      compId:undefined,
    }
  },
  computed: {},
  watch: {
  },
  created() {
    this.init()
  },
  mounted() {},
  methods: {
    init() {
      console.log("created");
      this.getEventList()
      this.getStyleList()
      if (this.$route.params && this.$route.params.id) {
        const id = this.$route.params.id
        this.compId = id
        this.form.cid = id;
      } else {
        this.formData = {};
      }
      this.getOpenList()
    },
    previous() {
      this.$router.push({ path: "/comp/update/" + this.compId });
    },
    getEventList() {
      event.getAllEvent().
      then((response) => {
        this.eventList = response.data.eventList
      })
      .catch((error) => {
        console.log(error)
      });
    },
    getStyleList() {
      style.getAllStyle().
      then((response) => {
        this.styleList = response.data.styleList
      })
      .catch((error) => {
        console.log(error)
      });
    },
    getOpenList() {
      open.getOpenList(this.compId).
      then((response) => {
        const openList = response.data.openlist
        for(let i = 0; i < openList.length; i++) {
          event.getEventById(openList[i].eid).
          then ((response) => {
            openList[i].eid = response.data.event.name
          })
          style.getStyleById(openList[i].sid).
          then ((response) => {
            openList[i].sid = response.data.style.name
          })
        }
        this.tableData = openList
        console.log(openList);
      })
      .catch((error) => {
        console.log(error)
      });
    },
    addOpen() {
      open.addOpen(this.form).
      then((response) => {
        this.$message({
          type: "success",
          message: "添加成功!",
        });
        this.reload()
      })
      .catch((error) => {
        console.log(error)
      });
    },
    deleteOpen(id) {
      this.$confirm("此操作将永久删除开设项目记录, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          open.deleteOpen(id).
          then((response) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.reload()
          })
          .catch((error) => {
            console.log(error)
          });
        });
    },
    next() {
      this.$router.push({ path: "/comp/add3/" + this.compId });
    }
  }
}

</script>

<style>
.el-upload__tip {
  line-height: 1.2;
}
.qwer {
    padding-top: 20px;
}
</style>

